<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <!-- 定位就是将盒子定在某个位置,所以位置也是在拜盒子，按照定位的方式移动盒子 -->
    <!-- 定位=定位模式（静态定位、固定定位、 相对定位、绝对定位）+遍偏移（top bottom left right） -->
    <!-- 绝对定位的特点   1.如果没有祖先元素或者祖先元素没有定位，则以浏览器的为准定位  2、
    如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的定位祖先元素为参考点移动位置
    3、绝对定位不再占有原先的位置 -->
    <link rel="stylesheet" href="position.css">
</head>

<body>
    <div class="box1"> </div>
    <div class="box2"></div>
    <div class="Grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
    <!-- 固定定位的特点：1、以浏览器的可视窗口为参照点 2、跟父元素没有任何关系 3、固定定位不再占有原先的元素-->
    <div class="hangxing">
        <img src="images/hangxing.jpg" alt="">
    </div>
    <!-- 固定定位小技巧，固定到版心右侧 -->
    <div class="fixed"></div>
    <div class="w">版心盒子 800像素</div>

</body>

</html>